<template>
	<view class="main">
		<view class="rvList">
			<view class="rvItem" v-for="(i,o) in list" :key="o" @click.self="openInfo(i)">
				<view class="rvItem-t">
					<view class="rvItem-t-n dot" :style="{'--bg-color':statusObj[i.id]?'#0f0':'#f00'}">{{i.rvInfo}}</view>
					<view class="rvItem-t-c">{{i.equipmentCode}}</view>
					<view class="rvItem-t-e" @click.stop="deleteItem(i)">
						<u-icon name="trash" color="#f00" size="36"></u-icon>
					</view>
				</view>
				<view class="rvItem-e">
					<view class="rvItem-e-item" @click.stop="clickFalse"><text>水</text><u-switch :loading="i.waterLoading"
							@change="changeWater(i,o)" :size='40' v-model="i.waterState"></u-switch> </view>
					<view class="rvItem-e-item" @click.stop="clickFalse"><text>电</text><u-switch :loading="i.electricLoading"
							@change="changeElecteric(i,o)" :size='40' v-model="i.electricState"></u-switch> </view>
				</view>
			</view>
		</view>
		<view class="rvAdd" @click="addRv">添加房车</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				openId: '',
				statusObj: {}
			}
		},
		onShow() {
			this.getList();
		},
		onLoad() {
			let data = uni.getStorageSync('openId')
			if (data.openid) {
				this.openId = data.openid
			}
		},
		methods: {
			changeElecteric(i, o) {
				const that = this
				that.list[o].electricState = !i.electricState
				that.list[o].electricLoading = true
				uni.showModal({
					title: '提示',
					content: `确认${!i.electricState ? '打开' : '关闭'} ${i.rvInfo} 的 供电？`,
					confirmColor: '#0FB3B3',
					success: async function(res) {
						if (res.confirm) {
							let _par = JSON.parse(JSON.stringify(i))
							if (_par.waterState) {
								_par.waterState = 1
							} else {
								_par.waterState = 0
							}
							if (_par.electricState) {
								_par.electricState = 0
							} else {
								_par.electricState = 1
							}
							let res1 = await that.$api.updateHydropowerState(_par)
							uni.$u.toast(res1.message)
							if (res1.success) {
								that.getList();
							}
							that.list[o].electricLoading = false
						} else {
							that.list[o].electricLoading = false
						}
					}
				});
			},
			changeWater(i, o) {
				const that = this
				that.list[o].waterState = !i.waterState
				that.list[o].waterLoading = true
				uni.showModal({
					title: '提示',
					content: `确认${!i.waterState ? '打开' : '关闭'} ${i.rvInfo} 的 供水？`,
					confirmColor: '#0FB3B3',
					success: async function(res) {
						if (res.confirm) {
							console.log(i)
							let _par = JSON.parse(JSON.stringify(i))
							if (_par.waterState) {
								_par.waterState = 0
							} else {
								_par.waterState = 1
							}
							if (_par.electricState) {
								_par.electricState = 1
							} else {
								_par.electricState = 0
							}
							let res1 = await that.$api.updateHydropowerState(_par)
							uni.$u.toast(res1.message)
							if (res1.success) {
								that.getList();
							}
							that.list[o].waterLoading = false
						} else {
							that.list[o].waterLoading = false
						}
					}
				});
			},
			async getList() {
				let res = await this.$api.getRvList({
					pageNo: 1,
					pageSize: 999,
					openid: this.openId
				})
				res.result.records.map(i => {
					i.waterLoading = false
					i.electricLoading = false
					if (i.waterState == 1) {
						i.waterState = true
					} else {
						i.waterState = false
					}
					if (i.electricState == 1) {
						i.electricState = true
					} else {
						i.electricState = false
					}
				})
				this.list = res.result.records
				this.getListStatus()
			},
			getListStatus() {
				this.list.forEach(it => {
					this.getStatusById(it.id)
				})
			},
			async getStatusById(id) {
				let params = { id }
				let res = await this.$api.getOnlineStatusById(params)
				if (res.success) {
					this.$set(this.statusObj, id, res.result)
				}
			},
			deleteItem(i) {
				const that = this
				uni.showModal({
					title: '提示',
					content: `确认 删除 ${i.rvInfo}  ？`,
					confirmColor: '#0FB3B3',
					success: async function(res) {
						if (res.confirm) {
							let res1 = await that.$api.deleteRv(i.id)
							if (res1.success) {
								that.getList()
							}
							uni.$u.toast(res1.message)
						}
					}
				});
			},
			clickFalse() {
				return false;
			},
			openInfo(i) {
				uni.navigateTo({
					url: '/pagesBusiness/rvManagement/rvInfo?id=' + i.id + '&name=' + i.rvInfo + '&isAdministrators=' + i
						.isAdministrators
				})
			},
			addRv() {
				uni.navigateTo({
					url: '/pagesBusiness/rvManagement/rvAdd'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.rvList {
			width: 700rpx;
			margin: 0 auto;
			padding-bottom: 200rpx;

			.rvItem {
				border: 1px solid #276aee77;
				margin: 20rpx 0;
				border-radius: 12rpx;
				box-shadow: 0 0 12rpx #276aee88;
				overflow: hidden;

				.rvItem-t {
					position: relative;
					background: linear-gradient(45deg, #276aee, #276aee99);
					padding: 30rpx;

					.rvItem-t-n {
						font-weight: bold;
						font-size: 33rpx;
						line-height: 2;
						color: #fff;

						&.dot {
							position: relative;
							padding-left: 42rpx;

							&:before {
								content: "";
								position: absolute;
								left: 0;
								top: 50%;
								transform: translateY(-50%);
								width: 18rpx;
								height: 18rpx;
								border-radius: 50%;
								background-color: var(--bg-color);
							}
						}
					}

					.rvItem-t-c {
						color: #fff;
						font-size: 28rpx;
						line-height: 1.5;
						margin-top: 8rpx;
					}

					.rvItem-t-e {
						position: absolute;
						top: 20rpx;
						right: 20rpx;
					}
				}

				.rvItem-e {
					padding: 30rpx 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;

					.rvItem-e-item {
						display: flex;
						align-items: center;

						text {
							display: inline-block;
							margin-right: 10rpx;
						}
					}
				}
			}
		}

		.rvAdd {
			position: fixed;
			bottom: 40rpx;
			left: calc(50% - 200rpx);
			width: 400rpx;
			border-radius: 12rpx;
			box-shadow: 0 0 12rpx #ddd;
			background-color: #276aee;
			color: #fff;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 33rpx;
			font-weight: bold;
			word-spacing: 6rpx;
			text-align: center;
		}
	}
</style>